<html>
<head>
    <meta charset="utf-8">
    <script src="vue.3.0.0-beta.17.js"></script>
    <style>
        .container {
            width: 360px;
            font-size: 12px;
            display: flex;
            flex-direction: column;
        }

        input {
            width: 50%;
            height: 24px;
            margin-bottom: 12px;
        }

        button {
            height: 24px;
            width: 120px;
            margin-bottom: 24px;
        }
    </style>
</head>
<body>
<div id="app" class="container">
    firstName:
    <input v-model="person.name.firstName"/>
    lastName:
    <input v-model="person.name.lastName"/>
    age:
    <input v-model="person.age" type="number"/>
    <span>{{person}}</span>
</div>
<script>
    const {createApp, ref, watch, reactive} = Vue
    const person = reactive({
        name: {
            firstName: '',
            lastName: '',
            fullName: ''
        },
        age: 19
    })
    let fullName = ref('')

    const app = {
        setup() {
            //n1 为新值，n2为旧值
            watch(person, (n1, n2) => {
                person.name.fullName = person.name.firstName + person.name.lastName
                console.info(fullName.value)
                console.info("n1: %s, n2: %s", n1, n2)
                console.info(n1)
                console.info(n2)
            })

            return {
                person
            }
        }
    }
    createApp(app).mount('#app')
</script>
</body>
</html>
